<template>
    <div class="local-form">
       <el-upload
        class="upload-hrfls"
        action="https://jsonplaceholder.typicode.com/posts/"
        :before-upload="beforeUpload"
        list-type="cvs/txt/tab/qarquet"
        :limit="1"
        :multiple ="false"
        ref="uploadBox"
        v-if="types == 0"
        >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip" >注意：从本地上传数据上传到新建的表中，只支持上传csv、txt、tab和qarquet文件，且不超过{{maxUpload}}M</div>
      </el-upload>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="文件类型" prop="type">
            <el-select v-model="ruleForm.type" placeholder="请选择文件类型">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="列分隔符" prop="col">
            <el-input v-model="ruleForm.col"></el-input>
        </el-form-item>
       <el-form-item label="行分隔符" prop="row">
            <el-input v-model="ruleForm.row"></el-input>
        </el-form-item>
         <el-form-item label="编码格式" prop="bmgs">
            <el-select v-model="ruleForm.bmgs" placeholder="请选择编码格式">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="文件首行为字段名" prop="isFirst" label-width="154">
            <el-checkbox v-model="ruleForm.isFirst"></el-checkbox>
        </el-form-item>
        <div class="control-box">
            <el-button type="default" @click="close()">关闭</el-button>
            <el-button type="default" @click="next('ruleForm')">下一步</el-button>
        </div>
     </el-form>
    </div>
</template>
<script>
export default {
    name: 'localUploadForm',
    props: {
        types: {
            type: Number,
            default: 0
        }
    },
    data () {
        return {
            rules: {},
            ruleForm: {},
            maxUpload: 1 //  以M为单位
        }
    },
    methods: {
        close () {
            this.$confirm('确定要关闭么?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$emit('closeDialog')
            }).catch(() => {
            })
        },
        next (formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$emit('nextStep', 2)
                } else {
                }
            })
        },
        resetValid () {
            this.$refs.formName.resetFields()
        },
        // 上传之前
        beforeUpload (file) {
            if (file.size > this.maxUpload * 1024 * 1024) {
                this.$message({
                    message: '文件大小不能超过' + this.maxUpload + 'M',
                    type: 'warning'
                })
                this.$refs.uploadBox.clearFiles()
                return false
            }
        }
    }
}
</script>
<style lang="less">
    .local-form {
        padding: 20px 5%;
        .el-upload__tip {
            margin-top:10px;
        }
        .upload-hrfls {
            margin-bottom: 20px;
        }
        .el-upload__tip {
            font-size: 14px;
        }
        .el-select {
            width: 100%;
            .el-input{
                width: 100%;
            }
        }
        .el-input {
            width: 100% !important;
        }
        .control-box {
            text-align:center;
            float:inherit;
        }
    }

</style>
